<template>
    <div id="contract_details">
        <div class="top">
            <!--审批步骤 -->
            <el-steps :space="200" :active="active" finish-status="success" :align-center="true" :simple="true">
                <el-step title="待申请"></el-step>
                <el-step title="待审核"></el-step>
                <el-step title="已通过"></el-step>
                <el-step title="已完成"></el-step>
            </el-steps>
        </div>
        <!--申请出库-->
        <el-dialog :visible.sync="outVisible" width="50%" :close-on-click-modal="false" append-to-body>
            <add_out></add_out>
        </el-dialog>
        <!-- 出库详情 -->
        <div class="body">
            <el-row class="title">
                <el-col :span="4">出库单</el-col>
                <el-col :span="5" :offset="15" v-if="detailData.state === 0 && indexboolean">
                    <el-button @click="change_state(1)">同意</el-button>
                    <el-button @click="change_state(2)">驳回</el-button>
                </el-col>
                <el-col :span="4" :offset="16" v-else-if="detailData.state === 2">
                    <el-button @click="finish_out">出库完成</el-button>
                </el-col>
                <el-col :span="4" :offset="16" v-else-if="detailData.state === 1">
                    <el-button @click="open_add_out">申请出库</el-button>
                </el-col>
                <el-col :span="3" :offset="17" v-else-if="detailData.state === 3">
                    <el-button v-print="'#outPrint'">打印</el-button>
                </el-col>
            </el-row>
            <el-form label-width="160px" style="overflow:hidden;padding-top:20px" >
                <el-form-item label="出库单单号：" class="inline__">
                    {{detailData.outDan}}
                </el-form-item>
                <el-form-item label="合同单号：" class="inline__" v-if="detailData.conDan !=''&&detailData.conDan!=null">
                    {{detailData.conDan}}
                </el-form-item>
                <el-form-item label="申请人：" class="inline__">
                    {{detailData.emp.empName}}
                </el-form-item>
                <el-form-item label="负责人：" class="inline__" v-if="detailData.principal !=''&&detailData.principal!=null">
                    {{detailData.principal}}
                </el-form-item>
                <el-form-item label="申请日期：" class="inline__">
                    {{detailData.outDate}}
                </el-form-item>
                <el-form-item label="交付期数：" class="inline__" v-if="detailData.deliveryTime !=''&&detailData.deliveryTime!=null">
                    {{detailData.deliveryTime}}
                </el-form-item>
                <el-form-item label="订单状态：">
                    {{detailData.state==0?"待审核":(detailData.state==1?"未通过":(detailData.state==2?"已通过":"已完成"))}}
                </el-form-item>
                <el-form-item label="备注：">
                    {{detailData.remark?detailData.remark:"无"}}
                </el-form-item>
            </el-form>
            <div style="margin-left: 20px">
                出库产品：
            </div>
            <el-table :data="detailData.wareDetail" style="padding:5px;">
                <el-table-column prop="proDetail.proDetailId" label="产品编号" align="center"></el-table-column>
                <el-table-column label="产品图片" prop="proDetail.proImgSrc" align="center">
                    <template slot-scope="s">
                        <el-image :src="s.row.proDetail.proImgSrc" style="width:50px;height:50px"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="proDetail.product.productName" label="产品名称" align="center"></el-table-column>
                <el-table-column prop="proDetail.product.productBrand" label="产品品牌" align="center"></el-table-column>
                <el-table-column prop="proDetail.product.proClassily.proClassilyName" label="产品分类" align="center"></el-table-column>
                <el-table-column prop="outNum" label="出库数量" align="center"></el-table-column>
                <el-table-column prop="proDetail.wareNum" label="库存数量" align="center"></el-table-column>
                <el-table-column prop="proDetail.abilities" label="规格属性" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="s">
                        <span v-for="item in s.row.proDetail.abilities" :key="item.abilityId">{{item.abilityName}} </span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--打印-->
        <out-print :out="detailData" style="position: relative;z-index: -1"></out-print>
    </div>
</template>

<script>
    import add_out from "./add_out";
    import outPrint from "./out_print";

    export default {
        name:"out_detail",
        components:{
            add_out,outPrint
        },
        data() {
            return {
                //详情页面的数据
                detailData: {},
                //新增出库单弹框状态
                outVisible: false,
                //新增时自动生成的出库单单号
                outDan:'',
                //是否能审批
                indexboolean:true,
            }
        },
        methods:{
            //查询此用户是否能审批
            findDuty(){
                this.axios.get("api/ware/findDuty",{params:{"empId":this.$store.state.user.empId}})
                    .then(v=>{
                        this.indexboolean = v.data;
                    }).catch()
            },
            //生成出库单单号
            out_dan(){
                const now = new Date();
                const month = now.getMonth() + 1;
                const day = now.getDate();
                let no =  now.getFullYear()+(month<10? "0"+month:month )+(day<10?"0"+day:day);
                let ran = parseInt(Math.random()*10000000+1,10);
                String.prototype.padLeft =
                    Number.prototype.padLeft = function(total, pad) {
                        return (Array(total).join(pad || 0) + this).slice(-total);
                    };
                const str = ran.padLeft(8);
                const result = no+str;
                this.outDan=result;
            },
            //申请出库
            open_add_out(){
                this.out_dan();
                this.$store.dispatch("setVueAppCai",this);
                this.outVisible = true;
            },
            //修改出库单状态
            change_state(index){
                this.axios.get("api/ware/change-outstate",{params:{"judge":index,"outId":this.detailData.outId}}).then(()=>{
                    this.global.mes_success("操作成功");
                    if(index==1){
                        this.detailData.state=2
                    }
                    if(index==2){
                        this.detailData.state=1
                        if(this.detailData.deliveryPlanId!=""&&this.detailData.deliveryPlanId!=null&&this.detailData.deliveryPlanId!=0){
                            this.axios.get("api/ware/change-deliveryPlan",{params:{"isOut":0,"deliveryPlanId":this.detailData.deliveryPlanId}})
                                .then(()=>{
                                        window.console.log(this.detailData.deliveryPlanId)
                                    }
                                ).catch()
                        }
                    }
                }).catch()
            },
            //出库完成
            finish_out(){
                this.detailData.wareDetail.forEach(pro=>{
                    let proNum=pro.proDetail.proNum+pro.outNum;
                    let wareNum=pro.proDetail.wareNum-pro.outNum;
                    this.axios.get("api/ware/change-num",{params:{"proDetailId":pro.proDetail.proDetailId,"wareNum":wareNum,"proNum":proNum}}).then(()=>{
                        this.axios.get("api/ware/change-outstate",{params:{"judge":3,"outId":this.detailData.outId}}).then(()=>{
                            pro.proDetail.proNum=proNum
                            pro.proDetail.wareNum=wareNum
                            this.detailData.state=3
                            if(this.detailData.deliveryPlanId!=""&&this.detailData.deliveryPlanId!=null&&this.detailData.deliveryPlanId!=0){
                                this.axios.get("api/ware/change-deliveryPlan",{params:{"deliveryPlanId":this.detailData.deliveryPlanId,"isOut":2}})
                                    .then(()=>{
                                        window.console.log(this.detailData.deliveryPlanId)
                                    }).catch()
                            }
                        }).catch()
                    }).catch()
                })
                this.global.mes_success("出库成功");
            }
        },
        computed:{
            //步骤条的数据
            active(){
                let a = 0;
                if (this.detailData.state === 1){
                    a = 0
                }
                else if(this.detailData.state === 0){
                    a = 1
                }
                else if(this.detailData.state === 2){
                    a = 2
                }
                else if(this.detailData.state === 3){
                    a = 3
                }
                return a
            },
        },
        created(){
            this.detailData = JSON.parse(sessionStorage.getItem("out"));
            sessionStorage.removeItem("out")
            this.findDuty();
        },
        /* 路由守卫 */
        beforeRouteEnter (to, from, next){
            if (sessionStorage.getItem("out")){
                next()
            }else{
                next({path:"/out_index"})
            }
        }
    }
</script>

<style scoped>
    #contract_details{margin: 0 auto; width: 1000px;}
    #contract_details .top{margin: 0 auto;width: 100%}
    .top .el-steps {background-color: #e9eef3;width:70%;margin-left: 120px}
    .body{background-color: #ffffff;width: 100%;}
    .title{border-bottom: 1.5px solid #ababab;margin:0 10px}
    .title .el-col{padding: 10px;font-size: 16px;line-height: 60px;}
    .inline__{width:50%!important;display:inline-block}
</style>